<template>
  <div>
    <van-skeleton style="margin-top: 15px" title :row="20" :loading="loading">
      <div class="spdetails">
        <div>
          <img @click="tpyl" :src="shop.photo" class="spdetails-img" />
          <div class="spdetails-xq">
            <div class="spdetails-ms">
              <div class="spdetails-ms-jg">￥{{ shop.price }}</div>
              <div class="spdetails-ms-name">
                {{ shop.name
                }}<van-tag style="margin-left: 3px" color="#8c8c8c">{{
                  shop.t
                }}</van-tag>
              </div>
              <div class="spdetails-ms-ms">{{ shop.specs }}</div>

              <div class="sprq">生产日期:{{ shop.birthday }}</div>
              <div class="sprq" style="margin-left: 6px">
                保质期:{{ shop.expiryday }}天
              </div>
              <div class="spdetails-ms-ms">
                {{ shop.explain != null ? shop.explain : "无" }}
              </div>
              <div class="spdetails-ms-kc">剩余库存:{{ shop.inventory }}</div>
            </div>
            <div class="spdetails-zt">
              <div class="spdetails-zt-xl">销量:{{ shop.sales }}</div>
              <div class="spdetails-zt-gx">
                <van-button type="primary" style="min-width: 40px;height: 20px;font-size: 12px;" @click="gxsj" plain>更新</van-button>
              </div>
              <div class="spdetails-zt-zt" v-if="shop.isShelve == 1">
                上架中
              </div>


              <!-- <van-tag class="spdetails-zt-zt2" v-else style="margin-left: 3px" color="#8c8c8c">未上架</van-tag> -->
              <div class="spdetails-zt-zt2" v-else>未上架</div>
            </div>
          </div>
          <van-cell title="查看资质" is-link icon="search" @click="ckzizhi" />
          <div class="spdetails-anniu">
            <!-- <van-button block type="primary" size="small">更新日期</van-button> -->
            <div>
              <van-button
                style="width: 48%"
                type="success"
                size="small"
                @click="sheet_show = true"
                >补货</van-button
              >
              <van-popup
            v-model:show="sheet_show"
            round 
            position="bottom"
            :style="{ height: '30%' }"
          >
            <div class="content" style="padding: 10px;">
              <div class="myflex">
                <div>补货数量</div>
                <div>
                  <van-stepper
                    v-model="bhnumber"
                    step="100"
                    input-width="50px"
                    button-size="32px"
                    style=""
                    integer
                    min="1"
                  />
                </div>
              </div>
              <div class="" style="margin-top: 50px">
                <van-button block type="primary" @click="() => quedingbuhuo()">
                  确定</van-button
                >
              </div>
            </div>
          </van-popup>

              <van-button
                style="width: 48%; margin-left: 4%"
                type="warning"
                size="small"
                @click="xgtype()"
                >更改类型</van-button
              >
            </div>

            <van-button
              v-if="shop.isShelve == 1"
              block
              type="danger"
              size="small"
              class="spdetails-button mts"
              @click="shangjia()"
              >下架</van-button
            >
            <van-button
              v-else
              block
              type="success"
              size="small"
              class="spdetails-button mts"
             
              @click="shangjia()"
              >上架</van-button
            >
            <!-- <Button block class="spdetails-button" color="success">补货</Button>
					<Button block class="spdetails-button" color="danger">下架</Button> -->
          </div>
        </div>
      </div>
      <van-popup
        v-model:show="buhuo"
        round
        :style="{ width: '80%', height: '22%', padding: '10px' }"
      >
        <div class="zheko-title">
          <div class="zheko-title-left">补货数量</div>
          <div class="zheko-title-right">
            <van-stepper
              v-model="bhnumber"
              theme="round"
              button-size="22"
              disable-input
            />
          </div>
        </div>
        <van-button size="small" block type="primary" @click="quedingbuhuo()"
          >确定</van-button
        >
      </van-popup>
      <van-popup
        v-model:show="typexg"
        round
        position="bottom"
        :style="{ height: '35%', padding: '10px', paddingTop: '20px' }"
      >
        <van-field
          v-model="cascaderValue"
          is-link
          readonly
          label="商品类型"
          placeholder="点击选择商品类型"
          @click="show = true"
        />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader
            v-model="type"
            title="请选择商品类型"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
        <van-button
          style="margin-top: 20px"
          block
          type="success"
          @click="typeqr()"
          >修改</van-button
        >
      </van-popup>
      <van-popup
        v-model:show="xgdate"
        round
        position="bottom"
        :style="{ height: '40%', padding: '10px', paddingTop: '20px' }"
      >
        <van-field
          v-model="birthday"
          color="#ee0a24"
          is-link
          readonly
          name="calendar"
          label="生产日期"
          placeholder="点击选择生产日期"
          @click="showCalendar = true"
        />
        <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
        <van-field
          v-model="expiryday"
          label="保质期(天数)"
          clearable
          placeholder="请输入保质期(天数)"
        />
        <van-button
          style="margin-top: 20px"
          block
          type="success"
          @click="dateqr()"
          >更新</van-button
        >
      </van-popup>
    </van-skeleton>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watchEffect, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getSingleSupplierGoods,
  getGoodsTypes,
  supplierBuhuo,
  goodsShelve,
  updateGoodsType,
  updateBirthday,
} from "@/api/manage";
import {
  showSuccessToast,
  showFailToast,
  showLoadingToast,
  showToast,
  showImagePreview,
} from "vant";
import { ref } from "vue";
export default defineComponent({
  
  setup() {
    const sheet_show = ref(false); //补货改变弹框属性
    const route = useRoute();
    const router = useRouter();
    const data = reactive({
      id: route.params.id.toString(),
      loading: true,
      shop: [],
      shoptyep: [],
      buhuo: false,
      bhnumber: 100,
      typexg: false,
      xgdate: false,
      show: false,
      cascaderValue: "",
      options: [],
      type: "",
      birthday: "",
      expiryday: "",
      showCalendar: false,
      //页面数据放置区
    });
    const methods = {
      //获取所有类型
      getshoptype() {
        if(!data.loading){
          showLoadingToast({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        }
        getGoodsTypes().then((res) => {
          data.shoptyep = res.data;
          this.getshop();
        });
      },
      //获取商品信息
      getshop() {
        getSingleSupplierGoods({
          id: data.id,
        }).then((res) => {
          data.shoptyep.forEach((d) => {
            if (d.id == res.data.type) {
              res.data.t = d.name;
            }
          });
          data.shop = res.data;
          data.cascaderValue = data.shop.t;
          data.birthday = data.shop.birthday;
          data.expiryday = data.shop.expiryday;
          data.type = data.shop.type;
          data.loading = false;
          // console.log(res.data);
        });
      },
    };
    const event = {
      //图片预览
      tpyl() {
        showImagePreview({
          images: [data.shop.photo],
          closeable: true,
        });
      },
      //查看资质
      ckzizhi() {
        router.push("/shop/spzizhi/" + data.id);
      },
      //更新生产日期
      dateqr() {
        showLoadingToast({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        updateBirthday({
          id: data.id,
          birthday: data.birthday,
          expiryday: data.expiryday,
        }).then((res) => {
          data.xgdate = false;
          data.shop.birthday = data.birthday;
          data.shop.expiryday = data.expiryday;
          showToast("更新成功");
        });
      },
      //打开更新日期弹层
      gxsj() {
        data.xgdate = true;
      },
      //日期控件
      onConfirm(date) {
        data.birthday = `${date.getFullYear()}/${
          date.getMonth() + 1
        }/${date.getDate()}`;
        data.showCalendar = false;
      },
      //更新类型
      typeqr() {
        showLoadingToast({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        updateGoodsType({
          id: data.id,
          type: data.type,
        }).then((res) => {
          data.typexg = false;
          data.shop.t = data.cascaderValue;
          showToast("修改成功");
        });
      },
      //类型选择控件
      onFinish({ selectedOptions }) {
        data.show = false;
        data.cascaderValue = selectedOptions
          .map((option) => option.text)
          .join("/");
      },
      //修改商品类型
      xgtype() {
        data.options = [];
        data.shoptyep.forEach((e) => {
          data.options.push({ text: e.name, value: e.id });
        });
        data.typexg = true;
      },
      //商品补货
      shopbh() {
        data.buhuo = true;
      },
      //上下架
      shangjia() {
        showLoadingToast({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        goodsShelve({
          id: data.shop.id,
        }).then((res) => {
          // data.showCenter = false;
          methods.getshop();
          showToast(res.message);
        });
      },
      //确认补货
      quedingbuhuo() {
        showLoadingToast({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        supplierBuhuo({
          id: data.shop.id,
          number: data.bhnumber,
        }).then((res) => {
          data.buhuo = false;
          if (res.result == 0) {
            data.shop.inventory = data.shop.inventory + data.bhnumber;
            showToast("补货成功");
            sheet_show.value = false;
          } else {
            showToast(res.message);
            sheet_show.value = false;
          }
        });
      },
    };
    onMounted(() => {
      //页面加载时自动触发监听的事件
      methods.getshoptype();
    });

    watchEffect(() => {
  if (sheet_show.value === false) {
      setTimeout(()=>{
        data.bhnumber = 100;
      },500)
  }
});
    return {
      ...toRefs(data),
      ...event,sheet_show
    };
  },
});
</script>
<style>
.zheko-title {
  margin-top: 15px;
  position: relative;
  border-bottom: 1px solid #eee;
  height: 40px;
  margin-bottom: 15px;
}
.zheko-title-left {
  position: absolute;
  left: 10px;
}
.zheko-title-right {
  position: absolute;
  right: 10px;
}
.spdetails-zt-xl {
  position: absolute;
  right: 5%;
  font-size: 10px;
  margin-top: 5px;
  padding: 3px 5px 3px 5px;
  border-radius: 3px;
  color: white;
  background-color: #ff4d4f;
}

.sprq {
  /* margin-top:5px; */
  /* margin: 1%; */
  display: inline;
  font-size: 10px;
  border: 1px solid #8c8c8c;
  margin-top: 6px;
  padding: 3px 5px 3px 5px;
  border-radius: 3px;
  color: #8c8c8c;
}

.spdetails {
  margin-left: 2%;
  border: 1px solid #eee;
  margin-right: 2%;
  padding-bottom: 15px;
  margin-top: 8px;
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  /* height:400px; */
}

.spdetails-img {
  width: 100%;
  height: 300px;
  border-radius: 6px;
}

.spdetails-xq {
  width: 100%;
  padding-bottom: 3px;
  display: flex;
  border-bottom: 2px solid #eee;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.spdetails-ms {
  width: 70%;
  padding: 5px 2% 5px 2%;
  /* border:1px solid black; */
}

.spdetails-ms-jg {
  color: red;
  font-size: 16px;
  font-weight: 600;
  margin-left: -2px;
}

.spdetails-ms-name {
  color: black;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
  margin-left: 2px;
}

.spdetails-ms-ms {
  color: #6a6868;
  font-size: 11px;
  margin-top: 3px;
}

.spdetails-ms-rq {
  margin-top: 7px;
  margin-bottom: 7px;
}

.spdetails-ms-kc {
  color: #6a6868;
  font-size: 11px;
  margin-top: 5px;
  margin-left: 1px;
}

.spdetails-ms-ms {
  color: #6a6868;
  font-size: 11px;
  margin-top: 5px;
  margin-left: 1px;
}
.spdetails-zt {
  width: 30%;
  padding: 2%;
  position: relative;
}

.spdetails-zt-gx {
  position: absolute;
  bottom: 45px;
  right: 5%;
  /* width:20px; */
  /* 	height:"20px"; */
  /* lineHeight:"10px";
	fontSize:"12px";
	paddingLeft:"9px",paddingRight:"9px" */
}

.spdetails-zt-zt {
  position: absolute;
  right: 5%;
  bottom: 5px;
  font-size: 10px;
  margin-top: 5px;
  padding: 3px 5px 3px 5px;
  border-radius: 3px;
  color: white;
  background-color: #52c41a;
}
.spdetails-zt-zt2 {
  position: absolute;
  right: 5%;
  bottom: 5px;
  font-size: 10px;
  margin-top: 5px;
  padding: 3px 5px 3px 5px;
  border-radius: 3px;
  color: white;
  background-color: #8c8c8c;
}

.spdetails-anniu {
  padding: 2px 5px 0px 5px;
}

.spdetails-button {
  margin-top: 10px;
}
</style>